function createEditorConfig() {
	const componentList = []
	const componentMap = {}

	return {
		componentList,//渲染左侧栏组件
		componentMap,//映射组件内容
		register: (component) => {
			componentList.push(component)
			componentMap[component.key] = component
		},
	}
}

export let editorConfig = createEditorConfig()
// console.log(777,editorConfig)
const createTextProps = (label) => {
	return {
		type: "input",
		label
	}
}
const createColorProps = (label) => {
	return {
		type: "color",
		label
	}
}
const createOptionProps = (label,options) => {
	return {
		type: "select",
		label,
		options
	}
}
editorConfig.register({
	label: "文本",
	preview: () => "预览文本",
	render: ({props}) => <span style={{color:props?.color,fontSize:props?.size}}>{props?.text || "渲染文本"}</span>,
	key: "text",
	props:{
		text:createTextProps("文本内容"),
		color:createColorProps("文本颜色"),
		size:createOptionProps("字体大小",[
			{label:'12px',value:'12px'},
			{label:'14px',value:'14px'},
			{label:'16px',value:'16px'},
		]),
	}
})
editorConfig.register({
	label: "按钮",
	preview: () => <ElButton>预览按钮</ElButton>,
	render: () => <ElButton>渲染按钮</ElButton>,
	key: "button",
	props:{
		text:createTextProps("文本内容"),
		size:createOptionProps("按钮大小",[
			{label:'默认',value:'medium'},
			{label:'大',value:'large'},
			{label:'小',value:'small'},
			{label:'极小',value:'mini'},
		]),
		type:createOptionProps("按钮类型",[
			{label:'默认',value:'default'},
			{label:'主要',value:'primary'},
			{label:'成功',value:'success'},
			{label:'警告',value:'warning'},
			{label:'危险',value:'danger'},
			{label:'信息',value:'info'},
		]),
	}
})
editorConfig.register({
	label: "输入框",
	preview: () => <ElInput placeholder="预览输入框"></ElInput>,
	render: () => <ElInput placeholder="渲染输入框"></ElInput>,
	key: "input",
	props:{
		text:createTextProps("输入框提示"),
	}
})
